<template>
  <div class="resetPassword">
    <van-nav-bar title="设置密码" left-arrow @click-left="$router.back()" />
    <van-cell-group inset>
      <van-field
        :type="sx1 ? 'text' : 'password'"
        :right-icon="sx1 ? 'eye-o' : 'closed-eye'"
        @click-right-icon="isShow1"
        v-model="password"
        placeholder="请设置登录密码"
      />
      <van-field
        :type="sx ? 'text' : 'password'"
        :right-icon="sx ? 'eye-o' : 'closed-eye'"
        @click-right-icon="isShow"
        v-model="passwordOk"
        placeholder="请再次输入密码"
      />
    </van-cell-group>
    <div class="btnbox">
      <van-button
        class="btn"
        size="normal"
        color="#f15a24"
        type="primary"
        @click="submit"
        >提交</van-button
      >
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted } from 'vue'
import { setPasswordApi } from '../http/api.js'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
export default {
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const data = reactive({
      password: '',
      passwordOk: '',
      sx: false,
      sx1: false
    })
    onMounted(() => {
      console.log('传过来的参数', route.query)
    })
    const submit = async () => {
      console.log(1)
      if (data.password == data.passwordOk) {
        let obj = {
          mobile: route.query.mobile, //手机号
          sms_code: route.query.sms_code, //手机验证码
          user_pass: data.passwordOk //密码
        }
        const res = await setPasswordApi(obj)
        console.log('设置密码', res)
        router.push('/login')
      } else {
        Toast('两次输入密码不一致')
        return false
      }
    }
    const isShow = () => {
      data.sx = !data.sx
    }
    const isShow1 = () => {
      data.sx1 = !data.sx1
    }
    return {
      ...toRefs(data),
      submit,
      isShow,
      isShow1
    }
  }
}
</script>
<style lang="scss" scoped>
.resetPassword {
  height: 100vh;
}
.btnbox {
  margin-top: 50px;
  padding: 0 40px;
  box-sizing: border-box;
  .btn {
    width: 100%;
  }
}
</style>
